import React, { Component } from 'react';
import { NavBar, Form, Input, Button, } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import "../styles/Register3.scss"
import * as service from "../api/index"


class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pass: '',
            visible: false
        };
    }
    async dianji() {
        var res = await service.user_zhuce({ tel: this.props.history.location.state.tel, password: this.state.pass })
        // console.log(this.props.history.location.state.tel);
        // console.log(res);
        alert(res.data.message)
        this.props.history.push('/login')
    }


    render() {
        return (
            <div className='zhuce3'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }} ><p>注册</p></NavBar>
                </div>
                <h4>请设置登录密码</h4>
                <div className="box1">
                    <div className='password'>

                        <form className='adm-input'>
                            <Input
                                className='input'
                                //autocomplete 用途： 规定输入字段是否应该启用自动完成功能
                                autoComplete=''
                                placeholder='请设置至少6位登录密码'
                                // value={}
                                value={this.state.pass}
                                onChange={value => {
                                    // console.log(value);
                                    this.setState({ pass: value })
                                }}
                                type={this.state.visible ? 'text' : 'password'}
                            />
                        </form>



                        <div className='eye'>
                            {!this.state.visible ? (
                                <EyeInvisibleOutline onClick={() => this.setState({ visible: true })} />
                            ) : (
                                <EyeOutline onClick={() => this.setState({ visible: false })} />
                            )}
                        </div>
                    </div>
                    <h5>密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字</h5>
                    <div className="btn" onClick={() => { this.dianji() }}>
                        <Button block color='primary' size='large'>
                            完成
                        </Button>
                    </div>
                </div>
            </div>
        );
    }
}

export default Register;